Skip to content

feat(examples,docs): migrate reference hubs to initHub; Nitro & Hono examples, Bun smoke, framework guides - #172

Open
antfubot wants to merge 1 commit into
mainfrom
feat/handler-examples-docs
Open

feat(examples,docs): migrate reference hubs to initHub; Nitro & Hono examples, Bun smoke, framework guides#172
antfubot wants to merge 1 commit into
mainfrom
feat/handler-examples-docs

Conversation

@antfubot

@antfubot antfubot commented Aug 6, 2026

Copy link
Copy Markdown
Collaborator

Top of the /__devframes/ standard-middleware stack (on #170). See plans/devframes-standard-middleware.md.

Intent

Prove the whole stack end to end and document it:

  • Reference hosts migrated, parity kept. examples/vite-devframe-hub and examples/next-devframe-hub assemble through one initHub() call while keeping their hand-built viewer UIs as protocol demos. Vite shares its own http server for the WS upgrade at /__devframes/__ws (zero extra ports); Next collapses its encoded catch-all routes into one app/%5F_devframes/[[...path]]/route.ts delegating to hub.handler.
  • Two new minimal examples demo the middleware itself with ui: createUi(): nitro-devframe-hub (Nitro v3, one middleware delegation, devframe packages externalized so import.meta.url asset resolution survives bundling) and hono-devframe-hub (one runtime-agnostic app file — @hono/node-server on Node, Bun.serve({ fetch, websocket }) on Bun's fetch-upgrade tier).
  • Bun proof: bun scripts/smoke-bun.ts boots the Hono hub under Bun.serve and verifies discovery, a frame SPA, embedded.js, and a WS RPC round-trip over a same-origin upgrade — no side-car anywhere. Verified locally:
    ✓ __connection.json advertises the same-origin socket: {"path":"/__devframes/__ws"}
    ✓ frame SPA serves · ✓ embedded.js (761 kB) · ✓ WS RPC probe → pong
    
  • Docs: adapters/initiate (mount snippets for Vite / Nitro / Hono / Next.js / Nuxt / SvelteKit, WS binding precedence, auth posture) and guide/hub-initiate (the namespace, the ui slot, the single hub Auth, the singular-vs-hub table).
  • initHub hardening from the migrations: devframes entries with dock overrides, rpcDeclarations passthrough, route-safe id guard (DF8004), bind-retry for the auto side-car, buffered embedded.js body that survives dev-worker proxies.

Stack

  1. feat!: add devframe/initiate — initDevframe framework-agnostic middleware #167 feat/handler-core
  2. refactor(adapters): rebuild createDevServer, viteDevBridge, and @devframes/next on initDevframe #168 feat/handler-adapters
  3. feat(hub): add @devframes/hub/initiate — initHub, the headless hub behind one handler #169 feat/hub-handler
  4. feat(hub-ui): add @devframes/hub-ui — the reference UI filling the hub's ui slot #170 feat/hub-ui
  5. feat/handler-examples-docs (this PR)

Created with the help of an agent.

Comment thread docs/adapters/initiate.md
Comment on lines +41 to +51
```ts [Nitro]
// middleware/devtools.ts
import { defineHandler } from 'h3'
import { devtools } from '../devtools'

export default defineHandler((event) => {
const { pathname } = new URL(event.req.url)
if (pathname === '/__my-tool' || pathname.startsWith('/__my-tool/'))
return devtools.handler(event.req)
})
```

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another solution is to create a server route, see: https://content.comark.dev/integrations/nitro#mount-the-handler

Suggested change
```ts [Nitro]
// middleware/devtools.ts
import { defineHandler } from 'h3'
import { devtools } from '../devtools'
export default defineHandler((event) => {
const { pathname } = new URL(event.req.url)
if (pathname === '/__my-tool' || pathname.startsWith('/__my-tool/'))
return devtools.handler(event.req)
})
```
```ts [Nitro]
// routes/__my-tool/[...path].ts
import { defineHandler } from 'nitro'
import { devtools } from '../../devtools'
export default defineHandler((event) => devtools.handler(event.req))

(not tested)

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call — switched both the docs snippet and the nitro-devframe-hub example from the middleware to a catch-all server route (routes/__devframes/[...path].ts) importing defineHandler from nitro, matching the Comark pattern.

One addition: the hub also serves its namespace root (/__devframes/ — the standalone viewer), and a [...path] catch-all doesn't match its own empty subpath, so I paired it with a routes/__devframes/index.ts (same one-line body). Verified end to end on Nitro v3 — root, frame SPAs, embedded.js, __connection.json, and __index.json all serve 200.

Base automatically changed from feat/hub-ui to main August 6, 2026 10:23
… & Hono examples, Bun smoke, framework guides

Both reference hosts now assemble through one initHub() call while
keeping their hand-built viewer UIs as protocol demos: the Vite example
shares Vite's own http server for the WS upgrade at /__devframes/__ws
(zero extra ports) and the Next example collapses its encoded catch-all
routes into a single app/%5F_devframes/[[...path]]/route.ts delegating
to hub.handler.

New minimal examples prove the middleware story end to end:
- examples/nitro-devframe-hub — Nitro v3, one catch-all route (+ an
  index route for the namespace root), devframe packages kept external
  so import.meta.url asset resolution survives bundling
- examples/hono-devframe-hub — one runtime-agnostic app file served by
  @hono/node-server on Node and Bun.serve on Bun (fetch-upgrade tier);
  scripts/smoke-bun.ts exercises fetch + WS RPC + embedded.js on Bun

initHub grows what the migrations needed: devframes entries with dock
overrides, rpcDeclarations passthrough, a route-safe id guard (DF8004),
a bind-retry for the auto side-car, and a buffered embedded.js body
that survives dev-worker proxies.

Docs: adapters/initiate (mount snippets for Vite/Nitro/Hono/Next/Nuxt/
SvelteKit, WS binding precedence, auth posture) and guide/hub-initiate
(the namespace, the ui slot, single hub Auth, singular-vs-hub table).
@antfubot
antfubot force-pushed the feat/handler-examples-docs branch from f60ca01 to 90930f8 Compare August 6, 2026 10:39
@netlify

netlify Bot commented Aug 6, 2026

Copy link
Copy Markdown

Deploy Preview for devfra ready!

Name Link
🔨 Latest commit 90930f8
🔍 Latest deploy log https://app.netlify.com/projects/devfra/deploys/6a74644c8da7920009b260da
😎 Deploy Preview https://deploy-preview-172--devfra.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants